<template>
  <div class="box">
    <!-- 导航 -->
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      {{ $t('home.Messagenotification') }}
    </div>
    <div class="Content col-wrapper">
      <!--    订单通知-->
      <div class="order-content">
        <div class="col-wrapper">
          <div class="col-wrapper">
            <!--            订单通知-->
            <div class="col-wrapper" style="width:100%">
              <div class="row-wrapper order-message">
                <img src="../../../../assets/static/message/message.png" alt=""/>
                <span>{{ info.name }}</span>
              </div>
              <div class="order-time">
                <span>{{ checkTime(info.create_time) }}</span>
              </div>
            </div>
            <!--            商品*2-->
            <div v-show="info.type==='2'&&goodsList.length>0"
                 style="width: 100%"
                 class="row-wrapper order-goods">
              <div v-for="item in goodsList"
                   :key="item.id"
                   class="row-wrapper"
                   style="width: 100%;justify-content: space-between">
                <div>
                  <span>{{ item.product_name }}</span>
                  <span style="margin-left:10px">x{{ item.product_num }}</span>
                </div>
                <span>{{ item.money }}</span>
              </div>
            </div>
            <div v-show="info.type!=='2'" style="width: 100%"
                 class="order-goods">
              <div>
                <span>{{ info.content }}</span>
              </div>
            </div>
          </div>
          <!--          支付金额-->
          <div class="row-wrapper order-price" style="justify-content: flex-end">
            <div>
              <span>{{$t('Amount')}}：</span>
            </div>
            <div>
              <span>{{ Number(info.money) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {index} from '@/api/merbership/coupon'
import '@/styles/flax.css'
import {noticedetail} from '@/api/merbership/notice'

export default {
  name: 'cardDetail',
  data() {
    return {
      dataList: [],
      info: {
        name: ''
      }
    }
  },
  activated() {
    // this.index()
    this.noticedetail(this.$route.query.id)
  },
  computed: {
    /**
     * 商品列表
     * @returns {any}
     */
    goodsList: function () {
      if (this.info.content === undefined) {
        return ''
      }
      if (this.info.content === null) {
        return ''
      }
      return this.info.content.length > 0 ? this.info.content : ''
    }
  },
  methods: {
    /**
     * 转换时间戳
     * @param timestamp
     */
    checkTime(timestamp) {
      // return new Date(Number(timestamp * 1000)).toLocaleString()
      return timestamp
    },
    // ----------- axios ----------------
    /**
     * 我的卡券列表
     */
    index() {
      const pd = {}
      index(this.$qs.stringify(pd))
        .then(res => {
          this.dataList = res.data.data.data
        })
    },
    /**
     * 通知详情
     * @param id
     */
    noticedetail(id) {
      const pd = {
        id: id
      }
      noticedetail(this.$qs.stringify(pd))
        .then(res => {
          this.info = res.data.data
        })
    }
  }
}
</script>

<style scoped>
.font-card {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 31px;
}

.font-date {
  font-size: 13px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 31px;
}

.message {
  justify-content: space-between;
  background: linear-gradient(-8deg, #FFB200, #FED000);
  box-shadow: 0 7px 23px 1px rgba(254, 208, 0, 0.35);
  border-radius: 12px;
}

.box {
  height: 100vh;
  background-color: #f5f5f5;
}

.box {
  height: 100vh;
  background-color: #f5f5f5;
}

.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/*  */
.blac_list {
  margin: 0 10px;
  width: 100%;
}

.blac_list > div {
  /*color: #fff;*/
  height: 50px;
  background-color: #fff;
  box-shadow: 0 7px 23px 1px rgba(180, 180, 180, 0.4);
  border-radius: 12px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.blac_list > div img {
  width: 20px;
  height: 20px;
}

.blac_list > div > div:nth-child(1) {
  width: 55%;
}

.blac_list > div > div:nth-child(1) span {
  margin: 0 1px;
}

.blac_list > div > div:nth-child(1) > span:nth-child(1) {
  font-size: 30px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(bottom, #FFD7D5, #FFFFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.blac_list > div > div:nth-child(1) > span:nth-child(3) {
  width: 60px;
  display: inline-block;
  background-image: url(../../../../assets/static/cardDetail/i2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffb400;
  line-height: 19px;
  text-align: center;
  font-size: 11px !important;
}

.blac_list > div > div:nth-child(2) {
  width: 5%;
  font-size: 10px;
  text-align: center;
}

.blac_list > div > div:nth-child(2) > span {
  font-size: 20px;
  color: #ffffff;
}

.blac_list > div > div:nth-child(3) {
  width: 15%;
  position: relative;
  font-size: 10px;
}

.blac_list > div > div:nth-child(3) img {
  width: 100%;
}

.blac_list > div > div:nth-child(3) span {
  position: absolute;
  top: 28%;
  left: 0;
  width: 100%;
  text-align: center;
}

/* ----------- 订单通知 --------------*/
.Content {
  width: 345px;
  padding: 15px;
}

.order-content {
  width: 345px;
  margin-top: 15px;
  background: #FFFFFF;
  box-shadow: 0 7px 23px 1px rgba(180, 180, 180, 0.4);
  border-radius: 12px;
  /*padding: 14px;*/
}

.order-content > div {
  margin: 15px;
}

.order-content > div > div:nth-child(1) {
  width: 100%;
  border-bottom: 1px solid #CBCBCB;
}

.order-message {
  align-self: flex-start;
  width: 100%;
}

.order-message > img {
  width: 20px;
  height: 20px;
}

.order-message > span {
  font-size: 16px;
  margin-left: 3px;
  font-weight: 500;
  color: #333333;
  line-height: 31px;
}

.order-time {
  width: 100%;
  align-self: flex-start;
}

.order-goods {
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.order-goods > div > span {
  font-size: 13px;
  font-weight: 400;
  color: #333333;
  line-height: 31px;
}

.order-time > span {
  font-size: 13px;
  font-weight: 400;
  color: #999999;
  line-height: 31px;
}

.order-content > div > div:nth-child(2) {
  width: 100%;
  height: 42.5px;
}

.order-price > div:nth-child(1) > span {
  font-size: 13px;
  font-weight: 500;
  color: #999999;
  line-height: 31px;
  font-family: avalonregular, poppins, helvetica, sans-serif;
}

.order-price > div:nth-child(2) > span {
  font-size: 13px;
  font-weight: 500;
  color: #6AC30C;
  line-height: 31px;
  font-family: avalonregular, poppins, helvetica, sans-serif;
}
</style>
